<template>
    <fieldset>
        <legend>自定义指令</legend>
        <input type="text" v-has>
        <ul>
            <!-- vue3里面对于循环批量创建的元素 推荐绑定函数的写法，-->
            <li v-for="item in arr" :ref="refss">
                <b v-for="k in item" ref="b">{{k}}</b>
            </li>
        </ul>
    </fieldset>
</template>
<script>
export default{
    methods:{
        refss(input){
            console.log(input);//li
        }
    },
    data(){
        return{
            msg:"red",
            arr:[
                {
                    id:1,
                    name:'李雷',
                    age:30
                },
                {
                    id:2,
                    name:'韩梅梅',
                    age:30
                }
            ]
        }
    },
    mounted(){
        console.log(this.$refs);
    },
    // 局部注册的方式是在app中
    directives:{
        has:{
            created(el,binding){
                console.log(el);
                console.log(binding);
            },
            // 指令的定义
            mounted(el){
                el.focus()
            }
        },     
    }
}
</script>
<style scoped>
/* legend{
    color:pink
} */

/* 一个全局规则 */ 
:global(legend){
    color:pink
}
</style>
